import type { FC } from 'react';
import styles from './SocialIcon.module.css';
import classNames from 'classnames/bind';

const cn = classNames.bind(styles);

export interface SocialIconProps {
  type: 'github' | 'slack' | 'twitter' | 'youtube' | 'stackoverflow' | 'linkedin' | 'facebook';
}

export const SocialIcon: FC<SocialIconProps> = ({ type }) => {
  const iconClass = cn('SocialIcon');
  if (type === 'github') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        className={iconClass}
        viewBox="0 0 24 24"
      >
        <path
          d="M11.86 1.6c1.9 0 3.67.44 5.3 1.31a9.8 9.8 0 0 1 5.24 8.75c0 2.27-.65 4.32-1.96 6.12a9.95 9.95 0 0 1-5.09 3.73c-.23.05-.4.03-.53-.07a.52.52 0 0 1-.2-.42v-3.46c0-.89-.22-1.5-.7-1.9 1.03-.1 1.8-.25 2.3-.42.79-.27 1.39-.7 1.81-1.24.48-.71.7-1.7.7-2.94 0-.52-.1-.99-.3-1.36-.14-.27-.4-.61-.8-1.03.1-.28.18-.62.2-1a4.67 4.67 0 0 0-.3-1.82c-.22-.05-.62.02-1.13.22-.32.15-.72.32-1.18.57l-.55.37a9.73 9.73 0 0 0-5.27 0l-.55-.37a8.54 8.54 0 0 0-1.2-.57c-.5-.2-.88-.24-1.13-.17a3.9 3.9 0 0 0-.3 1.83c0 .4.05.69.17.94-.32.42-.57.79-.73 1.13-.15.35-.22.77-.22 1.31 0 1.24.22 2.2.68 2.9.4.56.97 1 1.75 1.28.5.17 1.26.3 2.26.42-.35.32-.58.79-.68 1.4-.47.23-.92.3-1.38.25a2.02 2.02 0 0 1-1.68-1.1c-.17-.3-.4-.55-.68-.75l-.62-.3-.3-.05c-.3 0-.48.05-.48.15-.03.1.05.2.2.32l.2.18c.2.1.4.3.58.54.17.2.3.42.42.67l.18.32c.15.42.4.74.8.94a3 3 0 0 0 1.2.37c.33.02.69.02 1.06-.05l.45-.05.05 2.52c0 .17-.07.3-.2.42-.12.1-.3.15-.52.07a10.13 10.13 0 0 1-5.17-3.73 10.34 10.34 0 0 1-1.96-6.15c0-1.88.45-3.58 1.33-5.11a9.93 9.93 0 0 1 3.69-3.64 10.53 10.53 0 0 1 5.24-1.33ZM5.21 15.51c.05-.05.13-.07.2-.02.08.05.1.1.08.17-.03.07-.1.07-.2.02s-.1-.12-.08-.17Zm.45.35c.05-.05.13-.05.2.05.08.07.1.14.06.2-.05.04-.13.04-.2-.06-.1-.07-.1-.14-.06-.2Zm.43.52c.05-.03.1-.03.15-.03a.2.2 0 0 1 .1.1c.08.1.08.2 0 .25a.08.08 0 0 1-.1 0c-.02-.03-.1-.05-.15-.08-.05-.12-.05-.22 0-.24Zm.5.59c.03-.03.08-.03.13-.03l.15.08c.05.05.07.1.07.15.03.05 0 .1-.02.12-.08.07-.18.07-.3-.05a.22.22 0 0 1-.08-.17c0-.08.03-.08.05-.1Zm.68.52c.03-.1.1-.15.25-.1.15.05.2.1.2.17-.02.08-.05.13-.1.15-.05.02-.1.02-.17 0-.08-.02-.1-.07-.15-.1-.05-.05-.05-.07-.03-.12Zm1.28.17c0-.02-.02-.05-.08-.07a.4.4 0 0 0-.2-.05c-.15 0-.2.05-.2.17 0 .1.08.15.23.15.17-.03.25-.08.25-.2Zm.55-.25c.15 0 .23.05.23.13.02.07-.05.15-.2.2-.05 0-.1 0-.15-.03-.05-.02-.08-.07-.08-.15 0-.07.08-.12.2-.15Z"
          fill="#000000"
        />
      </svg>
    );
  }
  if (type === 'slack') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        className={iconClass}
        viewBox="0 0 24 24"
      >
        <path
          d="M6.43 14.53a2.02 2.02 0 0 1-4.03 0c0-1.1.9-2.01 2.02-2.01h2.01v2.01ZM7.45 14.53a2.02 2.02 0 0 1 4.03 0v5.05a2.02 2.02 0 0 1-4.03 0v-5.05Z"
          fill="#DD295C"
        />
        <path
          d="M9.47 6.43a2.02 2.02 0 0 1 0-4.03c1.1 0 2.01.9 2.01 2.02v2.01H9.47ZM9.47 7.45a2.02 2.02 0 0 1 0 4.03H4.42a2.02 2.02 0 0 1 0-4.03h5.05Z"
          fill="#40C6EE"
        />
        <path
          d="M17.57 9.47a2.02 2.02 0 0 1 4.03 0c0 1.1-.9 2.01-2.02 2.01h-2.01V9.47ZM16.55 9.47a2.02 2.02 0 0 1-4.03 0V4.42a2.02 2.02 0 0 1 4.03 0v5.05Z"
          fill="#37B57F"
        />
        <path
          d="M14.53 17.57a2.02 2.02 0 0 1 0 4.03c-1.1 0-2.01-.9-2.01-2.02v-2.01h2.01ZM14.53 16.55a2.02 2.02 0 0 1 0-4.03h5.05a2.02 2.02 0 0 1 0 4.03h-5.05Z"
          fill="#EBB13E"
        />
      </svg>
    );
  }
  if (type === 'twitter') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        className={iconClass}
        viewBox="0 0 24 24"
      >
        <path
          d="M20.5 8.23c0 1.93-.45 3.8-1.36 5.59a11.62 11.62 0 0 1-3.97 4.56c-1.86 1.26-4 1.9-6.42 1.9-2.31 0-4.43-.64-6.35-1.9.3.03.62.03.98.03 1.92 0 3.64-.6 5.18-1.8-.92 0-1.73-.26-2.41-.83a4.3 4.3 0 0 1-1.44-2.06c.26.03.52.03.75.03.36 0 .75-.03 1.1-.13a4.1 4.1 0 0 1-2.37-1.5 4.03 4.03 0 0 1-.94-2.66v-.07c.58.34 1.2.54 1.85.57a4.3 4.3 0 0 1-1.33-1.53 4.43 4.43 0 0 1-.59-2.03c0-.73.2-1.43.59-2.13A10.87 10.87 0 0 0 7.55 7.4c1.5.76 3.06 1.2 4.75 1.3-.06-.34-.06-.64-.06-.97a4.4 4.4 0 0 1 2.05-3.7c.62-.4 1.3-.56 2.05-.56.62 0 1.17.13 1.66.37.49.23.98.56 1.37.96.94-.2 1.82-.53 2.64-1-.33 1-.92 1.77-1.83 2.33.78-.1 1.56-.33 2.38-.7a9.6 9.6 0 0 1-2.09 2.23c0 .17.04.34.04.57Z"
          fill="#2AA4F1"
        />
      </svg>
    );
  }
  if (type === 'youtube') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        className={iconClass}
        viewBox="0 0 24 24"
      >
        <path
          d="M22.73 6.72a2.8 2.8 0 0 0-1.98-1.98C19.01 4.27 12 4.27 12 4.27s-7 0-8.75.47a2.8 2.8 0 0 0-1.98 1.98C.8 8.47.8 12.12.8 12.12s0 3.65.47 5.4a2.8 2.8 0 0 0 1.98 1.98c1.75.47 8.75.47 8.75.47s7 0 8.75-.47a2.8 2.8 0 0 0 1.98-1.98c.47-1.75.47-5.4.47-5.4s0-3.65-.47-5.4ZM9.78 15.47v-6.7l5.8 3.33-5.8 3.37Z"
          fill="#CE1E21"
        />
      </svg>
    );
  }
  if (type === 'stackoverflow') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        className={iconClass}
        viewBox="0 0 24 24"
      >
        <path d="M17.24 19.22v-5.57h1.85v7.42H2.4v-7.42h1.85v5.57h13Z" fill="#BCBBBB" />
        <path
          d="m6.3 13.12 9.07 1.9.38-1.83-9.07-1.9-.39 1.83ZM7.5 8.8l8.4 3.91.77-1.68L8.26 7.1l-.77 1.7Zm2.32-4.13 7.13 5.93 1.18-1.42L11 3.25 9.82 4.67Zm4.61-4.4-1.49 1.1 5.53 7.45 1.49-1.1L14.43.27ZM6.1 17.35h9.27V15.5H6.1v1.85Z"
          fill="#F28032"
        />
      </svg>
    );
  }
  if (type === 'linkedin') {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        className={iconClass}
        viewBox="0 0 24 24"
      >
        <path
          d="M20.28 3H3.72c-.4 0-.72.32-.72.72v16.56c0 .4.32.72.72.72h16.56c.4 0 .72-.32.72-.72V3.72c0-.4-.32-.72-.72-.72ZM8.34 18.34H5.67v-8.6h2.67v8.6ZM7 8.57a1.55 1.55 0 1 1 0-3.1 1.55 1.55 0 0 1 0 3.1Zm11.33 9.77h-2.67v-4.18c0-1-.02-2.28-1.39-2.28-1.39 0-1.6 1.09-1.6 2.2v4.26h-2.67v-8.6h2.56v1.18h.04a2.8 2.8 0 0 1 2.53-1.39c2.7 0 3.2 1.78 3.2 4.1v4.7Z"
          fill="#026899"
        />
      </svg>
    );
  }
  if (type === 'facebook') {
    return (
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" className={iconClass}>
        <path
          d="M20.63 2.63H3.38a.75.75 0 0 0-.75.75v17.25c0 .41.33.75.75.75h17.25c.41 0 .75-.34.75-.75V3.38a.75.75 0 0 0-.75-.75ZM18.45 8.1h-1.5c-1.17 0-1.4.56-1.4 1.38v1.8h2.8L18 14.11h-2.44v7.27h-2.92V14.1h-2.45v-2.83h2.45V9.2c0-2.42 1.48-3.74 3.64-3.74 1.03 0 1.92.07 2.18.1V8.1Z"
          fill="#4267B2"
        />
      </svg>
    );
  }
};
